<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>新增成果</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
    <meta name="description" content="Light Year Admin V4是一个后台管理系统的HTML模板，基于Bootstrap v4.4.1。">
    <meta name="author" content="yinqi">
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/materialdesignicons.min.css" rel="stylesheet">
    <!--标签插件-->
    <link rel="stylesheet" href="/static/js/jquery-tagsinput/jquery.tagsinput.min.css">
    <link rel="stylesheet" href="/static/js/bootstrap-datepicker/bootstrap-datepicker3.css">
    <link href="/static/css/layui.css" rel="stylesheet">
    <link href="/static/css/style.min.css" rel="stylesheet">
</head>

<body>
<div class="container-fluid p-t-15">

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">

                    <form action="{:url('addFile')}" method="post" class="row">
                        <div class="form-group col-md-12">
                            <label for="title">标题</label>
                            <input type="text" class="form-control" id="title" name="title" value="" placeholder="请输入主题" />
                        </div>
                        <div class="form-group col-md-12">
                            <label for="seo_description">通知内容</label>
                            <textarea class="form-control" id="seo_description" name="describe" rows="5" value="" placeholder="请输入科研内容"></textarea>
                        </div>
                        <div class="form-group col-md-12 file_input" style="display: none">
                            <label for="title">附件文件名</label>
                            <input type="text" class="form-control" id="filename" name="filename" />
                        </div>
                        <input type="hidden" name="path" id="path">
                        <div class="form-group col-md-12">
                            <label>附件上传</label>
                            <div class="form-controls">

                                <ul class="list-inline row lyear-uploads-pic mb-0" id="file_list">

                                    <li class="col-6 col-md-4 col-lg-2" id="upload_btn">
                                        <a class="pic-add" id="add-file-btn" href="#!" title="点击上传"></a>
                                    </li>

                                </ul>
                            </div>
                        </div>
                        <div class="form-group col-md-12 m-t-10">
                            <button type="submit" class="btn btn-primary ajax-post" target-form="add-form">确 定</button>
                        </div>
                    </form>

                </div>
            </div>
        </div>

    </div>

</div>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="/static/js/main.min.js"></script>
<script type="text/javascript" src="/static/js/moment.js/moment.js"></script>
<script src="/static/js/bootstrap-datepicker/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="/static/layui.js"></script>
<script type="text/javascript" src="/static/js/msg.js"> </script>
<script>
    layui.use('upload', function(){
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#add-file-btn' //绑定元素
            ,url: '/index/common/upload' //上传接口
            ,field:"image"
            ,done: function(res){
                $("#file_list").append(
                  `<li class="col-6 col-md-4 col-lg-2 file_one">
                       <figure>
                           <img src="https://img.icons8.com/office/100/000000/file.png">
                           <figcaption>
                           <a class="btn btn-round btn-square btn-success" href="#!" onclick="resetUpload()"><i class="mdi mdi-delete"></i></a>
                           </figcaption>
                       </figure>
                       <span>${res.data.filename}</span>
                    </li>`
                );
                $("#filename").val(res.data.filename);
                $("#path").val(res.data.url);
                $(".file_input").css("display","block");
                $("#upload_btn").hide();
                msgShow.success("上传成功");

            }
            ,error: function(errorRes){
                msgShow.error(errorRes)
            }
        });
    });

    function resetUpload(){
        $(".file_one").hide();
        $("#filename").val("");
        $("#path").val("");
        $("#upload_btn").show();
    }
</script>
</body>
</html>